<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { UserService, LoginParams } from '@/api/userApi'
const isRegister = ref(false)

const form = ref<UniFormRef>()
const formData = reactive<LoginParams>({
  email: '',
  nickName: '',
  password: '',
  rePassword: '',
  checkCode: '',
  checkCodeKey: ''
})
const rules = reactive({
  email: {
    type: 'email',
    required: true,
    message: '邮箱格式化错误',
    trigger: ['blur', 'change']
  },
  nickName: {
    required: true,
    validator: (rule: any, value: any, callback: any) => {
      if (!isRegister.value) return true
      if (!value) {
        callback(new Error('昵称不能为空'))
        return false
      }
      return true
    },
    trigger: ['blur', 'change']
  },
  password: {
    validator: (rule: any, value: any, callback: any) => {
      if (!value) {
        callback(new Error('密码不能为空'))
        return false
      }
      if (value.length < 6 || value.length > 15) {
        callback(new Error('密码长度为6-15位'))
        return false
      }
      return true
    },
    trigger: ['blur', 'change']
  },
  rePassword: {
    validator: (rule: any, value: any, callback: any) => {
      if (!isRegister.value) return true
      if (!value) {
        callback(new Error('确认密码不能为空'))
        return false
      }
      if (value !== formData.password) {
        callback(new Error('两次密码输入不一致'))
        return false
      }
      if (value.length < 6 || value.length > 15) {
        callback(new Error('密码长度为6-15位'))
        return false
      }
      return true
    },
    trigger: ['blur', 'change']
  },
  checkCode: {
    required: true,
    message: '验证码不能为空',
    trigger: ['change']
  }
})
const checkCode = ref('')
onMounted(() => {
  getCode()
})

const getCode = async () => {
  const res = await UserService.getCaptcha()
  checkCode.value = res.data.checkCode
  formData.checkCodeKey = res.data.checkCodeKey
}

const changeSubmitType = async () => {
  isRegister.value = !isRegister.value
  form.value?.resetFields()
  await getCode()
}

const submit = async () => {
  await form.value?.validate()
  if (isRegister.value) {
    // 注册
    await UserService.register(formData)
    // 注册成功后跳转至登录页面
    changeSubmitType()
  } else {
    // 登录
    await UserService.login(formData)
  }
}
</script>

<template>
  <view class="page page-login">
    <view class="app-info">
      <view class="title">
        <view class="logo">
          <image src="/static/images/icon.png" class="logo" />
        </view>
        <view class="app-name"> 易会议 </view>
      </view>
      <view class="desc"> 简单、快捷、高效开会 </view>
    </view>
    <view class="login">
      <up-form
        ref="form"
        :model="formData"
        :rules="rules"
        errorType="toast"
        label-width="100px"
        labelPosition="top"
      >
        <up-form-item label="邮箱" prop="email">
          <up-input v-model.trim="formData.email" clearable border="bottom" />
        </up-form-item>
        <up-form-item v-show="isRegister" label="昵称" prop="nickName">
          <up-input v-model.trim="formData.nickName" clearable border="bottom" />
        </up-form-item>
        <up-form-item label="密码" prop="password">
          <up-input v-model.trim="formData.password" type="password" clearable border="bottom" />
        </up-form-item>
        <up-form-item v-show="isRegister" label="确认密码" prop="rePassword">
          <up-input v-model.trim="formData.rePassword" type="password" clearable border="bottom" />
        </up-form-item>
        <up-form-item label="验证码" prop="checkCode">
          <up-input v-model="formData.checkCode" clearable border="bottom">
            <template #suffix>
              <image :src="checkCode" class="code" @click="getCode" />
            </template>
          </up-input>
        </up-form-item>
        <up-form-item>
          <view class="register">
            <text @click="changeSubmitType">{{ isRegister ? '已有账号' : '没有账号?' }}</text>
          </view>
        </up-form-item>
        <up-form-item>
          <view class="login-btn">
            <up-button type="primary" :text="isRegister ? '注 册' : '登 录'" @click="submit" />
          </view>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page-login {
  padding: 10px;
  .app-info {
    margin-bottom: 32px;
    .title {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      margin-bottom: 10px;
      .logo {
        width: 64px;
        height: 64px;
      }
      .app-name {
        margin-left: 8px;
        font-size: 32px;
      }
    }
    .desc {
      font-size: 16px;
    }
  }

  .register {
    width: 100%;
    color: $u-primary;
    text-align: right;
  }

  .code {
    width: 80px;
    height: 32px;
  }

  .login-btn {
    width: 100%;
    margin-top: 12px;
  }
}
</style>
